<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta>
    <link rel="stylesheet" href="../css/home.css">
    <script src="../js/jquery.js"></script>
    <script src="../js/common.js"></script>


</head>
<!--所有页面显示的内容全部在body里面-->
<!--<style>-->
<!--    /*.aa {*/-->
<!--    /*    background-color: lightseagreen;*/-->
<!--    /*}*/-->

<!--    #aa {-->
<!--        background-color: gray;-->
<!--    }-->

<!--    .cc {-->
<!--        background-color: red;-->
<!--    }-->

<!--    div {-->
<!--        background-color: aquamarine;-->
<!--    }-->

<!-- -->
<!--    -->
<!--</style>-->
<!--/*    优先级 style> id>class>div >引用的css */-->
<body>
<!--需要知道div的宽度 显示在页面上-->
<!--怎么拿到div  有多少种方式-->
<!-- class 类选择器 id id选择器 div 元素选择器 -->
<!--命名规范 ---见名知意
 命名按照功能 模块命名
 -->
<!--<div class="header">-->
<!--    <div>左边</div>-->
<!--    <div>右边</div>-->
<!--</div>-->

<!--<div class="content">-->
<!--   <div>-->
<!--<div>-->
<div id="top"></div>
<div>
    <div class="middle">
        <div>
            <div>
                <div class="title">较新动态</div>
                <div class="news">
                    <div><img src="../img/m331.jpg" height="190" width="268"/></div>
                    <div>
                        <div>
                            <div class="single-over font-title">日本较大抹茶督饮七叶和茶登陆上海
                            </div>
                            <div class="single-over font-content">日本较大的抹茶餐饮连锁正式登陆上海其中
                            </div>
                        </div>
                        <div>
                            <div class="single-over font-title">日本较大抹茶督饮七叶和茶登陆上海
                            </div>
                            <div class="single-over font-content">日本较大的抹茶餐饮连锁正式登陆上海其中
                            </div>
                        </div>
                        <div>
                            <div class="single-over font-title">日本较大抹茶督饮七叶和茶登陆上海
                            </div>
                            <div class="single-over font-content">日本较大的抹茶餐饮连锁正式登陆上海其中
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div>
                <div class="title">产品展示</div>
                <div class="product">
                    <div>
                        <div><img src="../img/galitudoujikuai.jpg" height="300" width="300"/></div>
                        <div class="single-over font-title">茄子</div>
                        <div class="single-over font-content">茄子花椒烟油</div>
                    </div>
                    <div>
                        <div><img src="../img/galitudoujikuai.jpg" height="300" width="300"/></div>
                        <div class="single-over font-title">茄子</div>
                        <div class="single-over font-content">茄子花椒烟油</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="foot"></div>
<!--</div>-->
<!--   </div>-->
<!--</div>-->
<!--<script>-->
<!--// &lt;!&ndash;    $ 是jquery的定义&ndash;&gt;-->
<!--    //我们需要引入jquery-->
<!--    $(function () {-->
<!--        $("#top").load("top.html");-->
<!--        $("#foot").load("foot.html");-->
<!--    })-->
<!--</script>-->
</body>
</html>
